<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Create designs for boxes you can laser cut">
    <meta name="keywords" content="box, laser cutter, cad">
    <meta name="author" content="Rahul Bhargava - Connection Lab, LLC">

    <title>{% block page_title %}Box Designer{% endblock %}</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/static/styles/boxmaker.css" type="text/css" />

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/icons/apple-touch-icon-144-precomposed.png">
    <link rel="Shortcut Icon" href="/static/icons/favicon.ico" type="image/x-icon">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.slim.min.js" integrity="sha512-5NqgLBAYtvRsyAzAvEBWhaW+NoB+vARl6QiA02AFMhCWvPpi7RWResDcTGYvQtzsHVCfiUhwvsijP+3ixUk1xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="/static/scripts/boxmaker.js"></script>

  </head>

  <body>

    <div class="container">

      <div class="row">
        <div class="col-md-4">
          <h1>Box Designer</h1>
          <p>
            Enter dimensions and Box Designer will generate a PDF you can use to cut a notched
            box on a laser-cutter. Check out this <a href="/static/files/example-box.pdf">example box design</a>.
            People have created more than 1 million boxes since 2010! Learn more about
            <a href="https://dataculture.northeastern.edu/projects/computational-design-fab-labs.html">our research into simple tools that
            support fab labs</a>.
          </p>
          <br />
          <p>
            Use this box designer a lot?  Consider chipping in some money to support our hosting and bug fixes!
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
              <input type="hidden" name="cmd" value="_donations">
              <input type="hidden" name="business" value="rahulb@yahoo.com">
              <input type="hidden" name="lc" value="US">
              <input type="hidden" name="item_name" value="Connection Lab, LLC">
              <input type="hidden" name="item_number" value="BoxDesigner">
              <input type="hidden" name="no_note" value="0">
              <input type="hidden" name="currency_code" value="USD">
              <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
              <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
              <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
          </p>
          <br />
          <p>
            <i>
            email: r.bhargava [ at ] northeastern [ dot ] edu
            <br />
            supported by <a href="https://camd.northeastern.edu">Northeastern University</a>, <a href="https://media.mit.edu/">MIT Media Lab</a>, and <a href="https://connectionlab.org/">Connection Lab</a>
            <br />
            designing boxes since 2002
            <br />
            mastodon: <a href="https://vis.social/@rahulbot">@rahulbot@vis.social</a>
            <br />
            instagram: <a href="http://instagram.com/rahulbot/">rahulbot</a>
            <br />
            twitter: <a href="https://twitter.com/rahulbot">@rahulbot</a>
            <br />
            <a href="https://github.com/dataculturegroup/box-designer-website/blob/main/LICENSE">License: APGL</a>
            <br />
            version {{boxmaker_version}}
            </i>
          </p>
          <br />
        </div>
        <div class="col-md-8">
          {% block content %}
          {{ content|safe }}
          {% endblock %}
        </div>
      </div>

      {% if ads|length > 0 %}
      <div id="bm-ads">
        <div class="row">
          <div class="col-md-12">Ads:</div>
        </div>
        <div class="row">
          {% for ad in ads %}
            <div class="col-md-4">
              <a href="{{ ad['url'] }}">
                <img src="{{ ad['image'] }}"
                     width="150"
                     srcset="{{ ad['srcset'] }}"
                     alt="{{ ad['name'] }}">
              </a>
              {{ ad['text'] | safe }}
            </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

    </div>

    <a href="https://github.com/rahulbot/boxmaker-website">
        <a href="https://github.com/you"><img class="bm-top-right" decoding="async" loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub" data-recalc-dims="1"></a>
    </a>

  </body>

  <script>
  $(function(){
    BoxMaker.init();
  });
  </script>

  {% if matomo_tracker_url and matomo_site_id %}
    <!-- Matomo -->
    <script type="text/javascript">
      var _paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//matomo.cmprod.media.mit.edu/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '1']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <!-- End Matomo Code -->
  {% endif %}

  <script>
  {% block page_scripts %}{% endblock %}
  </script>

</html>
